<%--
  Created by IntelliJ IDEA.
  User: yudejie2020
  Date: 2022/7/1
  Time: 14:45
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>测试者登录</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
    <style>
        <%--        body样式--%>
        * {
            margin: 0;
            padding: 0;
            outline: 0;
        }
        html, body {
            width: 100%;
            height: 100%;
            background:#000;
            overflow:hidden;
        }
        #container {
            width: 100%;
            height: 100%;
        }





        /*form表单*/
        .layui-form{
            width: 100%;
            margin: 0;
            padding: 0;

        }
        .containerSon{
            width: 420px;
            height: 280px;
            min-height: 280px;
            max-height: 320px;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            padding: 20px;
            z-index: 130;
            border-radius: 8px;
            background-color: rgba(0, 0, 0, 0.11);
            font-size: 16px;
        }
        .topic{
            text-align: center;
            color: #ffffff;
            font-size: 25px;
            font-weight: normal;
        }

        .my-form-item{
            margin:25px -50px;
            background-color: rgba(0, 0, 0, 0);
        }

        .my-input{
            border-radius: 45px;
            width: 300px;
            height: 40px;
            font-size: 15px;
            color: white;
            background-color: rgba(255, 255, 255, 0);
            border: rgba(255, 255, 255, 0.2) 2px solid;
            text-align: center;
        }

        .layui-btn{
            border-radius: 45px;
            width: 300px;
            height: 40px;
            font-size: 15px;
            color: white;
            background-color: rgba(0, 0, 0, 0);
            border: rgba(255, 255, 255, 0.2) 2px solid;
        }


    </style>

</head>
<body>
<div id="container">

</div>
<script src='${pageContext.request.contextPath}/lib/js/three.min.js'></script>
<script src='${pageContext.request.contextPath}/lib/js/CopyShader.js'></script>
<script src='${pageContext.request.contextPath}/lib/js/EffectComposer.js'></script>
<script src='${pageContext.request.contextPath}/lib/js/FilmPass.js'></script>
<script src='${pageContext.request.contextPath}/lib/js/FilmShader.js'></script>
<script src='${pageContext.request.contextPath}/lib/js/ShaderPass.js'></script>
<script src='${pageContext.request.contextPath}/lib/js/RenderPass.js'></script>
<script src="${pageContext.request.contextPath}/lib/js/index.js"></script>
<form class="layui-form"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
    <div class="containerSon">
        <p class="topic">FPA性格测试</p>
        <div class="layui-form-item my-form-item">
            <div class="layui-input-block">

                <input class="layui-input my-input " type="text" name="name" lay-verify="required|myName" placeholder="请输入用户名" autocomplete="off" value="张三">

            </div>
        </div>
        <div class="layui-form-item my-form-item">
            <div class="layui-input-block">
                <input class="layui-input my-input" type="text" name="phone" lay-verify="required|phone|number" placeholder="请输入手机号" autocomplete="off" value="13562356984">
            </div>
        </div>
        <div class="layui-form-item my-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit="" lay-filter="login">开始测试</button>
            </div>
        </div>
    </div>
</form>
<script>
    var type=null
    layui.use(['form','layer','jquery'], function(){
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.jquery;
        //校验姓名
        form.verify({
            myName: function(value, item){ //value：表单的值、item：表单的DOM对象
                if(!new RegExp("^[\u4E00-\u9FA5]{2,4}$").test(value)){
                    return '姓名只能是2到4位的汉字';
                }

            }
        });



        // 进行登录操作
        form.on('submit(login)', function (data) {
            data = data.field;
            if (data.username == '') {
                layer.msg('用户名不能为空');
                return false;
            }
            if (data.password == '') {
                layer.msg('密码不能为空');
                return false;
            }

            layer.msg('登录成功', function () {
                window.location = 'views/character/SdsSevere.jsp';
            });
            return false;
        });

        form.on('submit(testFormFilter)', function(data){
            //发送ajax到后端
            $.ajax({
                url:"fpaTest.jsp",
                type: "POST",
                dataType:"JSON",
                contentType:"application/json;charset=UTF-8",
                data:JSON.stringify(data.field),
                success:function (ret) {
                    console.log(ret);
                    if(ret.code==0){
                        if(type==1){
                            window.location.href="/test/toTest?type=1&testerId="+ret.data.id;
                        }else {
                            window.location.href="/test/toTest?testerId="+ret.data.id;
                        }

                    }else
                    {
                        if(type==1){
                            alert("对不起，您的手机号已经做过测试了");
                        }else {
                            window.location.href="/test/toResult?id="+ret.data.id;
                        }

                    }

                }
            })
            return false; //阻止表单跳转。
        });
    });
</script>
</body>
</html>


